<template>
  <el-card shadow="never" class="border-0">
    <el-tabs v-model="productSource" type="card" @tab-click="handleClick" style="width: auto" >
      <el-tab-pane label="HLD" name="HLD">
        <ProductSourceTab v-if="productSource === 'HLD'" :source="productSource"/>
      </el-tab-pane>
      <el-tab-pane label="WG" name="WG">
        <ProductSourceTab v-if="productSource === 'WG'" :source="productSource"/>
      </el-tab-pane>
      <el-tab-pane label="OEM" name="OEM">
        <ProductSourceTab v-if="productSource === 'OEM'" :source="productSource"/>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup>

import { ref, reactive, computed, onMounted } from "vue";
import FormDrawer from "~/components/FormDrawer.vue";
import { useRouter } from "vue-router";
import ProductSourceTab from '~/components/productSourceTab.vue';

const productSource = ref("HLD");
const handleClick = (tab) => {
  productSource.value = tab.name;
}

</script>